<template>
  <div class="bg-white rounded-lg p-8">
    <div class="mb-8">
      <h2 class="text-2xl font-bold text-gray-900 mb-2">通知设置</h2>
      <p class="text-gray-500">自定义您接收通知的方式和内容</p>
    </div>

    <div class="mb-8">
      <div class="flex items-center justify-between">
        <div>
          <h3 class="text-lg font-semibold text-gray-900 mb-1">接收通知</h3>
          <p class="text-sm text-gray-500">关闭后将不再接收任何通知</p>
        </div>
        <input type="checkbox" checked>
      </div>
    </div>

    <div class="mb-8">
      <h3 class="text-lg font-semibold text-gray-900 mb-4">通知类型</h3>
      <div class="space-y-4">
        <!-- 新订单通知：铃铛 / 闪电图标 -->
        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
              </svg>
            </div>
            <div>
              <div class="font-medium text-gray-900">新订单通知</div>
              <div class="text-sm text-gray-500">有新的代拿订单时通知您</div>
            </div>
          </div>
          <input type="checkbox" checked>
        </div>
        <!-- 订单状态更新：进度箭头图标 -->
        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v7h5m2 0a9 9 0 11-9-9 9 9 0 019 9z" />
              </svg>
            </div>
            <div>
              <div class="font-medium text-gray-900">订单状态更新</div>
              <div class="text-sm text-gray-500">订单状态发生变化时通知您</div>
            </div>
          </div>
          <input type="checkbox" checked>
        </div>
        <!-- 系统公告：喇叭图标 -->
        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-red-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 8a3 3 0 010 6m-3-9.75L8.5 7H5a2 2 0 00-2 2v6a2 2 0 002 2h3.5L12 19.75V4.25z" />
              </svg>
            </div>
            <div>
              <div class="font-medium text-gray-900">系统公告</div>
              <div class="text-sm text-gray-500">平台重要通知和公告</div>
            </div>
          </div>
          <input type="checkbox" checked>
        </div>
        <!-- 评价提醒：星星图标 -->
        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
            </div>
            <div>
              <div class="font-medium text-gray-900">评价提醒</div>
              <div class="text-sm text-gray-500">收到新的评价时通知您</div>
            </div>
          </div>
          <input type="checkbox">
        </div>
        <!-- 活动通知：礼物图标 -->
        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M20 12v7a2 2 0 01-2 2H6a2 2 0 01-2-2v-7m16 0H4m16 0h-5.5A1.5 1.5 0 0113 10.5V7m-9 5h5.5A1.5 1.5 0 0011 10.5V7m0 0h2.5A1.5 1.5 0 0115 8.5 1.5 1.5 0 0113.5 10H11m0-3H8.5A1.5 1.5 0 007 8.5 1.5 1.5 0 008.5 10H11" />
              </svg>
            </div>
            <div>
              <div class="font-medium text-gray-900">活动通知</div>
              <div class="text-sm text-gray-500">平台活动和优惠信息</div>
            </div>
          </div>
          <input type="checkbox">
        </div>
      </div>
    </div>

    <div class="mb-8">
      <h3 class="text-lg font-semibold text-gray-900 mb-4">通知方式</h3>
      <div class="space-y-4">
        <!-- 站内通知：小铃铛 -->
        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1" />
              </svg>
            </div>
            <div>
              <div class="font-medium text-gray-900">站内通知</div>
              <div class="text-sm text-gray-500">在平台内接收通知</div>
            </div>
          </div>
          <input type="checkbox" checked>
        </div>
        <!-- 微信通知：微信气泡 -->
        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-green-500" viewBox="0 0 24 24" fill="currentColor">
                <path d="M10.2 4C6.76 4 4 6.3 4 9.06c0 1.7.93 3.07 2.4 4.06L6 15.5l2.06-1.1c.64.18 1.31.27 2.14.27 3.44 0 6.2-2.16 6.2-4.83C16.4 6.3 13.64 4 10.2 4Zm-2.2 3a.85.85 0 1 1 0 1.7.85.85 0 0 1 0-1.7Zm4.4 0a.85.85 0 1 1 0 1.7.85.85 0 0 1 0-1.7Z"/>
              </svg>
            </div>
            <div>
              <div class="font-medium text-gray-900">微信通知</div>
              <div class="text-sm text-gray-500">通过微信接收通知</div>
            </div>
          </div>
          <input type="checkbox" checked>
        </div>
        <!-- 短信通知：短信气泡 -->
        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h6" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 5h14a2 2 0 012 2v7a2 2 0 01-2 2h-5l-3.5 3.5L8 16H5a2 2 0 01-2-2V7a2 2 0 012-2z" />
              </svg>
            </div>
            <div>
              <div class="font-medium text-gray-900">短信通知</div>
              <div class="text-sm text-gray-500">通过短信接收通知</div>
            </div>
          </div>
          <input type="checkbox">
        </div>
        <!-- 邮件通知：信封 -->
        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8" />
                <rect x="3" y="5" width="18" height="14" rx="2" ry="2" />
              </svg>
            </div>
            <div>
              <div class="font-medium text-gray-900">邮件通知</div>
              <div class="text-sm text-gray-500">通过邮件接收通知</div>
            </div>
          </div>
          <input type="checkbox">
        </div>
      </div>
    </div>

    <div class="mb-8">
      <h3 class="text-lg font-semibold text-gray-900 mb-4">免打扰设置</h3>
      <div class="p-4 bg-gray-50 rounded-lg">
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M20 12a8 8 0 11-8-8 5 5 0 006 6 7.95 7.95 0 012 2z" />
              </svg>
            </div>
            <div>
              <div class="font-medium text-gray-900">开启免打扰</div>
              <div class="text-sm text-gray-500">在此时间内将不接收通知</div>
            </div>
          </div>
          <input type="checkbox" checked>
        </div>
        <div class="grid grid-cols-2 gap-4 mt-4">
          <div><label class="block text-sm text-gray-600 mb-2">开始时间</label><input type="time" value="22:00" class="w-full px-4 py-2 border border-gray-300 rounded-lg"></div>
          <div><label class="block text-sm text-gray-600 mb-2">结束时间</label><input type="time" value="08:00" class="w-full px-4 py-2 border border-gray-300 rounded-lg"></div>
        </div>
      </div>
    </div>

    <div class="flex justify-end"><button class="flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700">保存设置</button></div>
  </div>
</template>

<script>
export default { name: 'CourierNotify' }
</script>
